<script lang="ts" setup>
import backImg from './img/back.png'
import {pushTo} from "@/router";
import {RouterName} from "@/utils/enum-type";
import BaseMenu from "@/views/qq/base/menu/BaseMenu.vue";

// vue的限制，不能不能通过导入类型
interface MenuType {
  id: number,
  title: string,
  engTitle?: string,
  path?: string
  children?: MenuType[]
}

const props = defineProps<{
  arr: MenuType[]
}>()
</script>
<template>
  <div class="left">
    <div class="back" @click="pushTo({name:RouterName.QQ})">
      <img :src="backImg" alt="" class="back-img"/>
    </div>
    <BaseMenu :arr="arr" class="left-center"/>
    <div class="spirit">
      <slot/>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.left {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-image: linear-gradient(90deg, #2c3ca6, #538fdc);
  width: 12em;
  font-size: calc(8px + 1.2vh);

  .back {
    display: flex;
    justify-content: center;
    padding: 1em 1em 3em;
    cursor: pointer;

    .back-img {
      height: 3em;
    }
  }

  .left-center {
    flex: 1;
    overflow-y: scroll;
  }

  .spirit {
    display: flex;
    justify-content: center;
    padding: 2em 0 2em;
    cursor: pointer;
  }
}
</style>